<template>
	<view class="hedaer">
		<view class="logo">
			<image @click="clickLogo" src="/static/images/logo.png" mode="widthFix"></image>
			<view class="list">
				<view class="li text-white" style="background-color: brown" @click="toPage('/')">
					首页
				</view>
			</view>
			<view class="list">
				<el-dropdown @command="toHome">
					<span class="" style="color: #000000e6;margin-right: 10px;">
						家庭生活<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item :command="index" v-for="(item,index) in tabBars"
							:key="index">{{item.name}}</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</view>
			<view class="list">
				<el-dropdown @command="toLife">
					<span class="" style="color: #000000e6;margin-right: 10px;">
						个人生活<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item :command="index" v-for="(item,index) in lifeTabBars"
							:key="index">{{item.name}}</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</view>


			<view class="gongulist">
				<text @click="toPage('/pages/tabbar/family/family')">家庭</text>
				<span @click="toPage('/pages/tabbar/video/video')">视频</span>
				<span @click="toPage('/pages/chat/index')">AI管家</span>
				<span @click="toPage('/pages/tabbar/mine/mine')">我的</span>
				<el-dropdown @command="handleCommand">
					<span class="bg-success text-white" style="margin-right: 10px;">
						AI工具箱<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item v-for="(item,index) in Ailist" :key="index"
							:command="item.workflowId">{{item.workflowName}}</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<span @click="toPage('/pagesobit/obit/index')">纪念馆</span>
				<span @click="toPage('/pagesfriend/tabbar/index')">广场</span>
				<!-- <span @click="toPage('/pages/work/index')">任务池</span> -->
				<!-- <span @click="toPage('/pages/tabbar/mine/mine')">亲人聊天</span> -->
				<!-- <span @click="toPage('/pages/tabbar/mine/mine')">家庭日历</span> -->
				<!-- <span @click="toPage('/pages/tabbar/mine/mine')">我的草稿</span> -->
			</view>


			<el-dropdown @command="shenghuoTo">
				<span class="" style="color: #000000e6;margin-right: 10px;">
					{{headerIndex == 1?'个人生活':headerIndex == 2?'纪念馆':headerIndex == 3?'广场':headerIndex == 4?'亲人聊天':headerIndex == 5?'家庭日历':headerIndex == 6?'我的草稿':'其它'}}
					<i class="el-icon-arrow-down el-icon--right"></i>
				</span>
				<el-dropdown-menu slot="dropdown">
					<!-- <el-dropdown-item command="1">个人生活</el-dropdown-item> -->
					<!-- <el-dropdown-item command="2">纪念馆</el-dropdown-item> -->
					<!-- <el-dropdown-item command="3">广场</el-dropdown-item> -->
					<el-dropdown-item command="4">亲人聊天</el-dropdown-item>
					<el-dropdown-item command="5">家庭日历</el-dropdown-item>
					<el-dropdown-item command="6">我的草稿</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
			<!-- <view class="gongulist2">
				<span @click="toPage('/pages/life/index')">个人生活</span>
				<span @click="toPage('/pagesobit/obit/index')">纪念馆</span>
				<span @click="toPage('/pagesfriend/tabbar/index')">广场</span>
				<span @click="toPage('/pages/chat/chat')">亲人聊天</span>
				<span @click="toPage('/pages/calendar/index2')">家庭日历</span>
				<span @click="toPage('/pages/draft/index')">我的草稿</span>
			</view> -->

		</view>

		<view class="search">
			<!-- <view class="inputs">
				<input type="text" placeholder="" />
				<span>
					<i class="iconfont">&#xe61d;</i>
					查询
				</span>
			</view> -->
			<view class="" @click="toNotice">
				<el-badge :value="noredNum" class="item" @click="toNotice">
					<view class="notice">
						<i class="iconfont">&#xe62c;</i>
						家庭消息
					</view>
				</el-badge>
			</view>
			<view class="" @click="toNotice2">
				<el-badge :value="noredNum2" class="item" style="margin-left: 10px;">
					<view class="notice">
						<i class="iconfont">&#xe62c;</i>
						广场消息
					</view>
				</el-badge>
			</view>




			<el-dropdown @command="fabu_handleCommand">
				<view class="notice text-success" style="margin-left: 30px;">
					<i class="iconfont">&#xe62c;</i>
					家庭发布
				</view>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="1">发文章</el-dropdown-item>
					<el-dropdown-item command="2">发图文</el-dropdown-item>
					<el-dropdown-item command="3">发视频</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>

			<el-dropdown @command="fabu_handleCommand2">
				<view class="notice text-success" style="margin-left: 10px;">
					<i class="iconfont">&#xe62c;</i>
					生活发布
				</view>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="1">发文章</el-dropdown-item>
					<el-dropdown-item command="2">发图文</el-dropdown-item>
					<el-dropdown-item command="3">发视频</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>

			<view class="notice text-success" style="margin-left: 10px;" @click="fabu_handleCommand3">
				<i class="iconfont">&#xe62c;</i>
				广场发布
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: 'navTab',
		components: {

		},
		props: {},
		data() {
			return {
				headerIndex: 0,
				tabBars: [],
				lifeTabBars: [],
				noredNum: 0,
				noredNum2: 0,
				Ailist: [],
			};
		},
		created() {

			let headerIndex = uni.getStorageSync('headerIndex') ? uni.getStorageSync('headerIndex') : ''

			if (headerIndex) {
				this.headerIndex = headerIndex
				uni.removeStorageSync('headerIndex')
			}

      const currentTime = Math.floor(Date.now() / 1000);

      let data = uni.getStorageSync('Ailist');
      let timestamp = uni.getStorageSync('Ailist_timestamp');
      if (timestamp && (currentTime - timestamp < 24 * 60 * 60)) {
        this.Ailist = data
      } else {
        this.$api2.getSupportedAI().then(res => {
          this.Ailist = res.supportedItems
          uni.setStorageSync('Ailist', this.Ailist);
          uni.setStorageSync('Ailist_timestamp', currentTime);
        })
      }

			var token = uni.getStorageSync('token') ? uni.getStorageSync('token') : ''
			if (token) {
				this.getAllCategories()
				this.getAllLifeCategories()
				this.$api.getUnReadSystemMessageCount().then(res => {
					this.noredNum = res
				})
				this.$api2.getUnReadMessageCount().then(res => {
					this.noredNum2 = res
				})
			}
		},

		methods: {
			shenghuoTo(index) {
				console.log(index)
				uni.setStorageSync('headerIndex', index)
				if (index == 1) {
					this.toPage('/pages/life/index')
				} else if (index == 2) {
					this.toPage('/pagesobit/obit/index')
				} else if (index == 3) {
					let token = uni.getStorageSync('token')
					if (token) {
						this.$api.myInfo().then(res => {
							console.log('用户信息', res)
							this.$api2.createUser(res).then(res2 => {
								uni.navigateTo({
									url: '/pagesfriend/tabbar/index'
								})
							})
						})
					} else {
						uni.navigateTo({
							url: '/pagesfriend/tabbar/index'
						})
					}
				} else if (index == 4) {
					this.toPage('/pages/chat/chat')
				} else if (index == 5) {
					this.toPage('/pages/calendar/index2')
				} else if (index == 6) {
					this.toPage('/pages/draft/index')
				}
			},
			handleCommand(e) {

				const item = this.Ailist.find((item) => item.workflowId === e);

				if (item.workflowName == '文生图') {
					uni.navigateTo({
						url: `/pages/ai/texttopic?workflowId=${e}`
					})
				} else if (item.workflowName == '图片高清化') {
					uni.navigateTo({
						url: `/pages/ai/gaoqingpic?workflowId=${e}`
					})
				} else if (item.workflowName == '图片风格化重绘') {
					uni.navigateTo({
						url: `/pages/ai/chonghui?workflowId=${e}`
					})
				} else if (item.workflowName == '图片指令重绘') {
					uni.navigateTo({
						url: `/pages/ai/chonghuitext?workflowId=${e}`
					})
				} else if (item.workflowName == '美颜') {
					uni.navigateTo({
						url: `/pages/ai/gaoqingpic?workflowId=${e}`
					})
				} else if (item.workflowName == '换脸') {
					uni.navigateTo({
						url: `/pages/ai/huanlian?workflowId=${e}`
					})
				} else if (item.workflowName == '文本朗读') {
					uni.navigateTo({
						url: `/pages/ai/langdu?workflowId=${e}`
					})
				} else if (item.workflowName == '歌词音乐生成') {
					uni.navigateTo({
						url: `/pages/ai/musicnotishi?workflowId=${e}`
					})
				} else if (item.workflowName == '提示词音乐生成') {
					uni.navigateTo({
						url: `/pages/ai/music?workflowId=${e}`
					})
				} else if (item.workflowName == '多图生视频') {
					uni.navigateTo({
						url: `/pages/ai/pictovideo?workflowId=${e}`
					})
				}
			},
			fabu_handleCommand(e) {
				console.log(e)
				if (e == 1) {
					uni.navigateTo({
						url: `/pages/create/article`
					})
				} else if (e == 2) {
					uni.navigateTo({
						url: `/pages/create/picture`
					})
				} else {
					uni.navigateTo({
						url: `/pages/create/video`
					})
				}
			},
			fabu_handleCommand2(e) {
				console.log(e)
				if (e == 1) {
					uni.navigateTo({
						url: `/pages/create/article?isMylife=1`
					})
				} else if (e == 2) {
					uni.navigateTo({
						url: `/pages/create/picture?isMylife=1`
					})
				} else {
					uni.navigateTo({
						url: `/pages/create/video?isMylife=1`
					})
				}
			},
			fabu_handleCommand3() {
				uni.navigateTo({
					url: `/pagesfriend/tabbar/fabu`
				})
			},
			// 获取导航栏信息
			getAllCategories() {
				let tabBars = []
				this.$api.getAllCategories().then(res => {
					if (res) {
						for (let i in res) {
							tabBars.push({
								name: res[i],
								id: i
							});
						}

						tabBars.unshift({
							name: '全部',
							id: ''
						})
						this.tabBars = tabBars;
					}
				});
			},
			// 获取生活导航栏信息
			getAllLifeCategories() {
				let tabBars = []
				this.$api.getAllLifeCategories().then(res => {
					if (res) {
						for (let i in res) {
							tabBars.push({
								name: res[i],
								id: i
							});
						}

						tabBars.unshift({
							name: '全部',
							id: ''
						})
						this.lifeTabBars = tabBars;
					}
				});
			},
			toHome(index) {
				console.log(index)
				uni.reLaunch({
					url: `/pages/tabbar/index/index?index=${index+1}`
				})
			},
			toLife(index) {
				console.log(index)
				uni.reLaunch({
					url: `/pages/life/index?index=${index}`
				})
			},
			clickLogo() {
				uni.reLaunch({
					url: `/pages/tabbar/index/index`
				})
			},
			toNotice() {
				uni.navigateTo({
					url: `/pages/news/notice`
				})
			},
			toNotice2() {
				console.log('123')
				uni.navigateTo({
					url: `/pagesfriend/tabbar/message`
				})
			},
			toPage(url) {
				if (url == '/') {
					return uni.reLaunch({
						url: `/pages/tabbar/index/index`
					})
				} else if (url == '/pagesfriend/tabbar/index') {
					this.$api.myInfo().then(res => {
						this.$api2.createUser(res).then(res2 => {
							uni.navigateTo({
								url: '/pagesfriend/tabbar/index'
							})
						})
					})
				} else {
					uni.navigateTo({
						url
					})
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.search {
		display: flex;
		align-items: center;

		.notice {
			font-size: 28rpx;
			position: relative;

			.iconfont {
				margin-right: 4px;
			}
		}
	}


	.hedaer {
		padding: 0 30px;
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		box-shadow: 0 3px 3px #e2e2e2;
		position: sticky;
		top: 0;
		z-index: 1000;

		.inputs {
			display: flex;
			align-items: center;
			background-color: #f8f8f8;
			padding: 6px 10px;
			border-radius: 4px;
			margin-right: 30px;

			input {
				width: 300px;
			}

			span {
				color: #f22d2d;
				font-size: 28rpx;
				width: 50px;
				cursor: pointer;

				.iconfont {
					margin-right: 4px;
					font-size: 28rpx;
				}
			}
		}

		.logo {
			display: flex;
			align-items: center;

			image {
				width: 100px;
				height: auto;
				margin-right: 30px;
				cursor: pointer;
			}

			.list {
				display: flex;

				.li {
					font-size: 30rpx;
					margin-right: 20px;
					cursor: pointer;
				}
			}
		}
	}

	.gongulist span,
	.gongulist2 span {
		font-size: 15px;
		margin-right: 20px;
		cursor: pointer;
	}
	
	.gongulist text {
		font-size: 15px;
		margin-right: 20px;
		cursor: pointer;
		background-color: greenyellow;
	}
</style>